<template>
	<view class="order-list" :class="themeName">
		<!-- Tabs -->
		<navbar title="活动切换"></navbar>

		<view class="u-border-bottom" style="background-color: #fff;">
			<!-- 搜索 -->
			<view class="search-input">
				<u-search class="flex-1" v-model="keyword" height="72" bg-color="#F4F4F4" :show-action="false"
					:placeholder="$zhTran('请输入团购活动名称')" @search="handleSearch" />
				<view class="search-action" @tap="handleSearch(keyword)">{{$zhTran(' 搜索 ')}}</view>
			</view>
		</view>

		<u-tabs :list="tabsList" :is-scroll="false" :height="80" :active-color="themeColor" :bar-style="{top: '100%'}"
			:current="tabsIndex" @change="changeCurrentTab" />

		<!-- Order Lists -->
		<view class="order-item">
			<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: $zhTran('暂无活动~'),
				  	fixed: true
				  }
			  }" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<block v-for="(tabItem, tabIndex) in tabsList" :key="tabItem['sign']">
					<view class="order-contain" v-if="currentTab['sign'] === tabItem['sign']">
						<view class="order" v-for="item in tabsList[tabIndex].list" :key="item.id">
							<!-- Order Header -->
							<view class="order-header">
								<view class="name">{{item.name}}</view>
								<view :class="[
											'order-status', 
											`order-status--${orderStatus[item.status]['style']}`
										]">{{ orderStatus[item.status]['name'] }}</view>
							</view>

							<view class="title m-b-20">{{$zhTran('活动时间')}}</view>
							<view class="times m-b-20">{{item.start_time_desc}}{{$zhTran(' 至 ')}}{{item.end_time_desc}}
							</view>
							<!-- Order Footer -->
							<view class="order-footer">
								<view class="order-button order-button--primary" @click="chooseAct(item.id)">
									{{$zhTran('选择')}}
								</view>
							</view>
						</view>
					</view>
				</block>
			</mescroll-uni>

		</view>
	</view>
</template>


<script>
	import {
		apiCommunityGroupPurchaseActivityList
	} from '@/api/community_group_purchase'
	import {
		PaymentStatusEnum
	} from '@/utils/enum'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		name: 'CGPOrderList',
		mixins: [MescrollMixin],

		data() {
			return {
				// Tabs列表
				tabsList: [{
					sign: 'all',
					name: this.$zhTran('全部'),
					list: [],
				}, {
					sign: 'not',
					name: this.$zhTran('未开始'),
					list: [],
				}, {
					sign: 'conduct',
					name: this.$zhTran('进行中'),
					list: [],
				}, {
					sign: 'end',
					name: this.$zhTran('已结束'),
					list: [],
				}],
				tabsIndex: '', // Tabs索引

				// 订单状态
				orderStatus: {
					0: {
						name: this.$zhTran('未开始'),
						style: 'primary',
					},
					1: {
						name: this.$zhTran('进行中'),
						style: 'warning',
					},
					2: {
						name: this.$zhTran('已结束'),
						style: 'muted',
					},
				},
				keyword: '',
				eventChannel: null,
			}
		},

		computed: {
			// 当前Tab项
			currentTab() {
				return this.tabsList[this.tabsIndex] || {}
			},

			// 映射Tabs项
			mapTabsItem() {
				return sign => this.tabsList.find(item => item['sign'] === sign)
			}
		},

		methods: {
			// 更改当前Tab页
			changeCurrentTab(index) {
				this.tabsIndex = index
				this.refreshOrderData()
			},

			// 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 搜索
			handleSearch(value) {
				console.log(value)
				this.keyword = value
				this.mescroll && this.mescroll.resetUpScroll();
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				const sign = this.currentTab.sign
				apiCommunityGroupPurchaseActivityList({
					type: sign,
					keyword: this.keyword,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					const tab = this.mapTabsItem(sign)
					if (num === 1) tab.list = []
					tab.list = [...tab.list, ...lists]
					tab.list = this.$zhTran(tab.list)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			chooseAct(id) {
				this.eventChannel.emit("resetCgpId", {
					cgp_id: id
				});
				uni.navigateBack({
					delta: 1
				})
			}
		},

		onLoad() {
			const options = this.$Route.query
			const mode = options.mode ?? 'all'
			const tabIndex = this.tabsList.findIndex(item => item['sign'] === mode)

			const eventChannel = this.getOpenerEventChannel()
			this.eventChannel = eventChannel

			this.changeCurrentTab(tabIndex)
			setTimeout(() => {}, 0.5 * 1000)
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.order-item {
			flex: 1;
			min-height: 0;
		}
	}

	.search-input {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 20rpx;

		.search-action {
			width: 100rpx;
			text-align: center;
		}
	}

	.order-contain {
		padding: 0 20rpx;
	}

	.order {
		padding-left: 20rpx;
		margin-top: 20rpx;
		border-radius: 5px;
		background-color: #FFFFFF;

		&-header {
			display: flex;
			height: 80rpx;
			align-items: center;
			padding-right: 20rpx;

			.name {
				color: rgba(56, 56, 56, 1);
				font-size: 28rpx;
			}

			.order-status {
				margin-left: auto;
				font-size: $-font-size-sm;

				&--primary {
					color: rgba(250, 64, 52, 1);
				}

				&--warning {
					color: rgba(255, 141, 26, 1);
				}

				&--muted {
					color: rgba(37, 183, 73, 1);
				}
			}
		}

		.title {
			color: rgba(128, 128, 128, 1);
			font-size: 26rpx;
		}

		.time {
			color: rgba(56, 56, 56, 1);
			font-size: 26rpx;
		}

		&-footer {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			padding-right: 20rpx;
			border-top: $-solid-border;

			.order-button {
				box-sizing: border-box;
				padding: 10rpx 30rpx;
				border-radius: 2px;
				font-size: $-font-size-nr;

				&--primary {
					background-color: rgba(255, 208, 0, 1);
					color: rgba(74, 25, 0, 1);
				}
			}
		}

	}
</style>